<template>
    <view class="edit_card">
        <cropper
            ref="cropper"
            selWidth="660rpx"
            selHeight="660rpx"
            @upload="myUpload"
            avatarStyle="width:100vw;height:100vw;"
        >
        </cropper>
        <!-- 编辑内容 -->
        <view class="edit_info">
            <view
                class="avatar flex_wrap row_middle row_center"
                @click="tapUpdateImg"
            >
                <u-avatar size="188rpx" :src="cardFormList.avatar"></u-avatar>
                <image
                    class="avatar_img"
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/22/ea1a66a640eb4cb287b0ce352b7e40a0.png"
                    mode=""
                ></image>
            </view>
            <u-line color="#f3f3f3" length="2rpx"></u-line>
            <view class="tel">
                <view>昵称</view>
                <u--text
                    :text="cardFormList.salesmanName || '--'"
                    color="#3D3D3D"
                    size="32rpx"
                    align="right"
                />
            </view>
            <view class="tel">
                <view>电话</view>
                <u--text
                    :text="cardFormList.contactPhone || '--'"
                    color="#3D3D3D"
                    size="32rpx"
                    align="right"
                />
            </view>
            <view class="tel">
                <view>微信</view>
                <u--text
                    suffixIcon="arrow-right"
                    iconStyle="font-size: 40rpx;margin-left:16rpx;color:#666"
                    :text="cardFormList.wechatNumber || '暂无微信'"
                    color="#3D3D3D"
                    size="32rpx"
                    align="right"
                    @click="editWechatNumber()"
                />
            </view>
            <u-modal
                :show="wechatNumberShow"
                showCancelButton
                title="微信"
                @confirm="editWechatNumberConfirm"
                @cancel="wechatNumberShow = false"
            >
                <view style="width: 560rpx; margin: 0 auto">
                    <u-input
                        placeholder="请输入内容"
                        border="surround"
                        v-model="wechatNumberEdit"
                    />
                </view>
            </u-modal>
            <view class="tel">
                <view>视频号</view>
                <u--text
                    suffixIcon="arrow-right"
                    iconStyle="font-size: 40rpx;margin-left:16rpx;color:#666"
                    :text="cardFormList.wxVideoChannel || '暂无视频号'"
                    color="#3D3D3D"
                    size="32rpx"
                    align="right"
                    @click="editwechatVideoChannel()"
                />
            </view>
            <u-modal
                :show="wechatVideoChannelShow"
                showCancelButton
                title="视频号"
                @confirm="editwechatVideoChannelConfirm"
                @cancel="wechatVideoChannelShow = false"
            >
                <view style="width: 560rpx; margin: 0 auto">
                    <u-input
                        placeholder="请输入内容"
                        border="surround"
                        v-model="wechatVideoChannelEdit"
                    />
                </view>
            </u-modal>
            <!-- 编辑个人简历 -->
            <view class="tel">
                <view>个人简介</view>
                <view class="photo_r"
                    ><u-icon
                        name="arrow-right"
                        color="#666"
                        size="20"
                        @click="open_resume"
                /></view>
            </view>

            <view class="resumeClass">
                <text class="my_text" space="ensp">{{
                    cardFormList.resume || "--"
                }}</text>
            </view>
            <u-gap height="32rpx" />
            <!-- 编辑地址 -->
            <view class="tel">
                <view
                    >地址
                    <span style="font-size: 24rpx"
                        >（最多添加三个地址）</span
                    ></view
                >
                <view class="photo_r" v-if="addressList.length < 3"
                    ><u-icon
                        name="plus-circle"
                        color="#666"
                        size="20"
                        @click="getLocation"
                /></view>
            </view>
            <view v-for="(item, i) in addressList" style="display: flex">
                <view class="tel resumeClass" style="margin-right: 20rpx">
                    <text class="my_text" space="ensp"
                        >{{ item.address }}（{{ item.name }}）</text
                    >
                    <view class="photo_r" @click="getLocation(i, 'e')"
                        ><u-icon name="arrow-right" color="#666" size="20"
                    /></view>
                </view>
                <view class="photo_r"
                    ><u-icon
                        name="trash"
                        color="#666"
                        size="28"
                        @click="deleteFun(i)"
                /></view>
            </view>
            <view class="save" @click="to_save">保存</view>
        </view>
        <u-popup :show="resume_show" @close="close_resume" mode="center">
            <view style="width: 640rpx; border-radius: 16rpx">
                <u-gap height="64rpx" />
                <u-text
                    text="个人简介"
                    color="#000"
                    size="34rpx"
                    align="center"
                />
                <u-gap height="64rpx" />
                <view style="width: 560rpx; margin: 0 auto">
                    <u-textarea
                        :confirmType="null"
                        ref="textarea"
                        count
                        maxlength="1000"
                        cursorSpacing="30"
                        fixed
                        :customStyle="textAreaCustomStyle"
                        v-model="cardFormList.resume"
                        placeholder="请输入内容"
                        border="surround"
                        height="300rpx"
                    />
                </view>
                <u-gap height="64rpx" />
                <view class="email_btn" @click="submitResume"
                    ><u-text
                        text="确定"
                        align="center"
                        color="#588BF3 "
                        size="34rpx"
                        lineHeight="112rpx"
                /></view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    businessCard,
    editEmail,
    editResume,
    editPhoneSendMsm,
    editPhone,
    editAvatar,
    editWechatVideoChannel,
    editWechatNum,
} from "@/api/cardSalesman";
import caches from "@/config/caches.js";
import { baseUrl } from "@/config/tendIdConfig.js";
import {
    getCustomerInfoByToken,
    customerAddress,
    getCustomerAddress,
} from "@/api/login.js";
import cropper from "@/components/cropper/cropper.vue";
export default {
    components: { cropper },
    data() {
        return {
            wechatNumberShow: false,
            wechatNumberEdit: "",
            wechatVideoChannelShow: false,
            wechatVideoChannelEdit: "",
            textAreaCustomStyle: {
                backgroundColor: "#EDEDED",
                color: "#666",
                width: "100%",
                padding: "20rpx",
                paddingBottom: "40rpx",
                boxSizing: "border-box",
                fontSize: "26rpx",
            },
            cardFormList: {
                contactPhone: "",
                checkCode: "",
                email: "",
                resume: "",
            },
            resume_show: false, //更改个人简历弹框
            addressList: [],
            customerId: "",
        };
    },
    onShow() {
        this.getBusinessCard();
    },
    onReady() {
        this.$refs.textarea.setFormatter(this.formatter);
    },
    onLoad(o) {
        getCustomerInfoByToken().then((res) => {
            this.customerId = res.data.id;
            getCustomerAddress(this.customerId).then((r) => {
                console.log(3333, r);
                if (r.code === 200) this.addressList = uni.$u.deepClone(r.data);
            });
        });
    },
    methods: {
        async to_save() {
            console.log(this.addressList);
            const { code, msg } = await customerAddress(
                this.addressList,
                this.customerId
            );
            if (code === 200) uni.$u.toast(msg);
        },
        deleteFun(index) {
            console.log("index :>> ", index);
            this.addressList.splice(index, 1);
        },
        getLocation(index, type) {
            const that = this;
            uni.chooseLocation({
                success: function (res) {
                    console.log(type, index, res, that.addressList);
                    const copyList = uni.$u.deepClone(that.addressList);
                    !type && (that.addressList = [...that.addressList, res]);
                    type && (that.addressList[index] = res);
                },
                fail(locationResult) {
                    if (
                        locationResult.errMsg ===
                        "chooseLocation:fail auth deny"
                    ) {
                        uni.showModal({
                            title: "提示",
                            content: "填写违法地点需要获取您的定位权限",
                            success(modalResult) {
                                const { confirm } = modalResult;

                                if (confirm) {
                                    uni.openSetting({
                                        success(openSettingResult) {
                                            if (
                                                openSettingResult.authSetting[
                                                    "scope.userLocation"
                                                ] === true
                                            ) {
                                                that.getLocation();
                                            } else {
                                                uni.showToast({
                                                    title: "获取授权失败",
                                                    icon: "none",
                                                    duration: 2000,
                                                });
                                            }
                                        },
                                    });
                                }
                            },
                        });
                    }
                },
            });
        },
        formatter(value) {
            if (value.length > 1000) {
                return value.slice(0, 1000);
            } else {
                return value;
            }
        },
        editWechatNumber() {
            this.wechatNumberEdit = this.cardFormList.wechatNumber;
            this.wechatNumberShow = true;
        },
        editWechatNumberConfirm() {
            //点击确定修改微信
            if (!this.wechatNumberEdit.replace(/[, ]/g, ""))
                return uni.$u.toast("请输入微信！");
            editWechatNum({
                wechatNum: this.wechatNumberEdit,
            })
                .then(async (res) => {
                    this.getBusinessCard();
                    this.wechatNumberShow = false;
                    uni.$u.toast("修改微信成功");
                })
                .catch((error) => {
                    uni.$u.toast(error);
                });
        },
        editwechatVideoChannel() {
            this.wechatVideoChannelEdit = this.cardFormList.wxVideoChannel;
            this.wechatVideoChannelShow = true;
        },
        editwechatVideoChannelConfirm() {
            //点击确定修改视频号
            if (!this.wechatVideoChannelEdit.replace(/[, ]/g, ""))
                return uni.$u.toast("请输入视频号！");
            editWechatVideoChannel({
                wechatVideoChannel: this.wechatVideoChannelEdit,
            })
                .then(async (res) => {
                    this.getBusinessCard();
                    this.wechatVideoChannelShow = false;
                    uni.$u.toast("修改视频号成功");
                })
                .catch((error) => {
                    uni.$u.toast(error);
                });
        },
        async getBusinessCard() {
            const res = await businessCard();
            this.cardFormList = res.data;
            this.emailInp = res.data.email;
            if (res.data.resume == null) {
                res.data.resume = "";
            }
            this.phoneInp = res.data.contactPhone;
        },
        //上传返回图片
        myUpload(rsp) {
            const self = this;
            console.log(" rsp.path; :>> ", rsp.path);
            let _this = this;
            uni.uploadFile({
                url: `${baseUrl}/salesman/fileOss/uploadFileImg`,
                filePath: rsp.path, //图片地址
                header: {
                    "Content-Type": "multipart/form-data",
                    Authorization:
                        `Bearer ${uni.getStorageSync("access_token")}` || "",
                },
                name: "file",
                success: (res) => {
                    if (res.statusCode === 200) {
                        let avatar = JSON.parse(res.data).data;
                        setTimeout(() => {
                            this.submitAvatar(avatar);
                        }, 500);
                    } else {
                        that.$tool.toast(res.message);
                    }
                },
            });
        },
        tapUpdateImg() {
            this.$refs.cropper.fSelect();
        },
        //上传图片
        async submitAvatar(avatar) {
            const res = await editAvatar({
                avatar: avatar,
            });
            res.code === 200 && this.getBusinessCard();
            res.code === 200 &&
                (await this.$store.dispatch("USERINFO", { $u: uni.$u }));
        },
        // 简历模块
        open_resume() {
            this.resume_show = true;
        },
        close_resume() {
            this.resume_show = false;
            this.getBusinessCard();
        },
        submitResume() {
            // 去除前导和尾部空格
            let trimmedText = this.cardFormList.resume.trim();

            const params = {
                resume: trimmedText,
            };
            editResume(params).then((res) => {
                this.getBusinessCard();
                this.resume_show = false;
                uni.$u.toast("编辑成功");
            });
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .u-textarea__count {
    background-color: #ededed !important;
}

.edit_card {
    background: #ffffff;
    width: 100%;
    color: #333333;
    min-height: 100%;
}

.edit_info {
    padding: 0 28rpx;
}

.avatar {
    position: relative;
    height: 312rpx;
    .avatar_img {
        position: absolute;
        width: 64rpx;
        height: 64rpx;
        top: 60%;
        left: 55%;
    }
}

.tel {
    border-top: 1px solid #f3f3f3;
    height: 104rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #777;
    align-items: center;
}

.photo_r {
    display: flex;
    font-weight: bold;
}

.resumeClass {
    padding: 24rpx 20rpx;
    background: #f3f3f3;
    height: 100%;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    margin-bottom: 20rpx;
}

.my_text {
    white-space: normal; // 规定段落中的文本不进行换行
    word-break: break-all; // 允许单词中换行，在容器的最右边进行断开不会浪费控件
    word-wrap: break-word; // 防止长单词溢出，单词内部短句
}

.mask {
    width: 320px;
    height: 294px;
    background: #ffffff;
    border-radius: 20rpx;
}

.tel_number {
    padding: 0 38rpx;
}

.email_btn {
    border-top: 2rpx solid rgba(0, 0, 0, 0.1);
    height: 112rpx;
}
.save {
    width: 670rpx;
    height: 88rpx;
    background: #588bf3;
    border-radius: 50rpx;
    line-height: 88rpx;
    color: #fff;
    text-align: center;
    font-size: 32rpx;
    margin: 40rpx 0;
}
</style>
